<template>
  <div class="logoandsearch-wrap">
    <!-- {{searchRes}} -->
    <!-- logo、搜索框按钮 -->
    <div class="logoAndSearch">
      <!-- logo -->
      <img src="@/assets/evaluate/logo.png" class="logo" @click="toHome" />
      <div class="search">
        <div class="search-center">
          <!-- form中的两个子元素浮动，要给form清除影响（塌陷），不清除会造成form的父元素一起塌陷。 -->
          <form class="clearFix">
            <input
              type="text"
              class="txt"
              placeholder="搜索商户名、地址、菜名、外卖等"
              v-model="keyword"
            />
            <button class="btn" type="button" @click="goSearch">搜索</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "LogoSearch",
  data() {
    return { keyword: "" };
  },
  methods: {
    toHome() {
      this.$router.push("/home");
    },

    goSearch() {
      const { keyword } = this;
      this.$router.push(`/search?keyword=${keyword}`);
    },
  },
};
</script>

<style lang="css" scoped>
/* logo和搜索框 */
.logoandsearch-wrap {
  height: 106px;
  background: #fff;
}
.logoAndSearch {
  width: 1200px;
  height: 106px;
  background: #fff;
  margin: 0 auto;
  position: relative;
}
.logoAndSearch .logo {
  float: left;
  width: 210px;
  margin: 25px 0 0 0px;
}
/* 搜索框开始 */
.search {
  /* width: 666px;
	height: 100px; */
  background: #fff;
  float: left;
  margin: 30px 0 0 95px;
}
.search .search-center form .txt {
  width: 380px;
  height: 34px;
  border: 2px solid #ff6b37;
  background: url(~@/assets/evaluate/fang.png) no-repeat 5px center;
  float: left;
  padding-left: 30px;
  color: #dbd0cf;
}
.search .search-center form .txt:focus {
  outline: none;
  border: 2px solid #ff6b37;
}
.search .search-center form .btn {
  float: left;
  width: 130px;
  height: 38px;
  background: #ff6b37;
  color: #eee;
  font-size: 18px;
  font-weight: 100;
  border: 1px solid #ff6b37;
}
/* 搜索框结束 */
</style>